<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>产品列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" href="lib/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body ontouchstart>
<header class='weui-header fixed-top'>
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" action="goods_list.htm" method="post">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" name="searchname" list="prolist" placeholder="搜索您想要的商品" required>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索您想要的商品</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
    <div class="pro-sort">
        <div class="weui-flex">
            <input type="hidden" th:value="${searchname}" id="searchname"/>
            <input type="hidden" th:value="${jiushui}" id="jiushui"/>
            <div class="weui-flex__item" onclick="zh();"><div class="placeholder SortAscCss" id="zh">综合</div></div>
            <div class="weui-flex__item"  onclick="xl();"><div class="placeholder NormalCss" id="xl">按销量</div></div>
            <div class="weui-flex__item"  onclick="jg();"><div class="placeholder NormalCss" id="jg">按价格</i></div></div>
        </div>
    </div>
</header>

<div class="weui-content" style="padding-top:85px;">
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>

    <div id="list" class='demos-content-padded proListWrap'>
        <div class="pro-items" th:each="lst:${listge}">
            <a th:href="@{/pro_info.htm(goodsId=${lst.id})}" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd"><img class="weui-media-box__thumb" th:src="${lst.img.path}" alt=""></div>
                <div class="weui-media-box__bd">
                    <h1 class="weui-media-box__desc" th:text="${lst.goodsName}"></h1>
                    <div class="wy-pro-pri">¥<em class="num font-15" th:text="${lst.price}"></em></div>
                    <ul class="weui-media-box__info prolist-ul">
                        <li class="weui-media-box__info__meta"><em class="num" th:text="${lst.sumnum}"></em>条评价</li>
                        <li class="weui-media-box__info__meta"><em class="num"  th:text="${lst.goodnum}/${lst.sumnum}*100.00 "></em><em>%</em>好评</li>
                    </ul>
                </div>
            </a>
        </div>
    </div>

    <div class="weui-loadmore" th:if="${listge.size()>=6}">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>


<script src="lib/jquery-2.1.4.js"></script>
<script src="lib/fastclick.js"></script>
<script src="js/json2.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
        $(".pro-items:gt(5)").hide();
        $("#searchInput").bind('input propertychange',function(){
            var content=$(this).val();
            $.ajax({
                url:"searchlist.htm?content="+content,
                type:"post",
                success:function (message) {
                    $(".weui-content").after("<datalist id='prolist'></datalist>");
                    $.each(message,function(i,item){
                        $("#prolist").append("<option>"+item.goodsName+"</option>");
                    });
                }
            });
        })
    });
</script>
<script src="js/jquery-weui.js"></script>
<script>
    $(document.body).pullToRefresh().on("pull-to-refresh", function() {
        setTimeout(function() {
            $("#time").text(new Date);
            $(document.body).pullToRefreshDone();
        }, 2000);
    });
    // infinite
    var loading = false;
    $(document.body).infinite().on("infinite", function() {
//        alert("3333");
        if(loading) return;
        loading = true;
        setTimeout(function() {
            //alert("3333");
            $(".pro-items:gt(5)").show();
            loading = false;
        }, 2000);
    });
</script>
<script type="text/javascript">
    var flag=false;
    function zh() {
        $("#zh").attr("class","placeholder SortAscCss");
        $("#xl").attr("class","placeholder NormalCss");
        $("#jg").attr("class","placeholder NormalCss");
        flag=false;
        if($("#jiushui").val()!=1){
        $.ajax({
            url:"goods_list_zh.htm?searchname="+$("#searchname").val(),
            type:"post",
            success:function (message) {
                $(".pro-items").remove();
                $.each(message,function(i,item){
                    var mm=parseFloat(item.goodnum/item.sumnum*100).toFixed(2);
                    $(".proListWrap").append("<div class='pro-items'>\n" +
                        "<a href=\"pro_info.htm?goodsId="+item.id+"\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                        "                <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\""+item.img.path+"\" alt=\"\"></div>\n" +
                        "                <div class=\"weui-media-box__bd\">\n" +
                        "                    <h1 class=\"weui-media-box__desc\">"+item.goodsName+"</h1>\n" +
                        "                    <div class=\"wy-pro-pri\">¥<em class=\"num font-15\" >"+parseFloat(item.price).toFixed(2)+"</em></div>\n" +
                        "                    <ul class=\"weui-media-box__info prolist-ul\">\n" +
                        "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\">"+item.sumnum+"</em>条评价</li>\n" +
                        "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\"></em>"+mm+"<em>%</em>好评</li>\n" +
                        "                    </ul>\n" +
                        "                </div>\n" +
                        "            </a>\n" +
                        "        </div>");
                });
                $(".pro-items:gt(5)").hide();
            }
        })
        }else{
            $.ajax({
                url:"goods_list_jszh.htm",
                type:"post",
                success:function (message) {
                    $(".pro-items").remove();
                    $.each(message,function(i,item){
                        var mm=parseFloat(item.goodnum/item.sumnum*100).toFixed(2);
                        $(".proListWrap").append("<div class='pro-items'>\n" +
                            "<a href=\"pro_info.htm?goodsId="+item.id+"\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                            "                <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\""+item.img.path+"\" alt=\"\"></div>\n" +
                            "                <div class=\"weui-media-box__bd\">\n" +
                            "                    <h1 class=\"weui-media-box__desc\">"+item.goodsName+"</h1>\n" +
                            "                    <div class=\"wy-pro-pri\">¥<em class=\"num font-15\" >"+parseFloat(item.price).toFixed(2)+"</em></div>\n" +
                            "                    <ul class=\"weui-media-box__info prolist-ul\">\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\">"+item.sumnum+"</em>条评价</li>\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\"></em>"+mm+"<em>%</em>好评</li>\n" +
                            "                    </ul>\n" +
                            "                </div>\n" +
                            "            </a>\n" +
                            "        </div>");
                    });
                    $(".pro-items:gt(5)").hide();
                }
            })
        }
    }
    function xl() {
        $("#zh").attr("class","placeholder NormalCss");
        $("#xl").attr("class","placeholder SortAscCss");
        $("#jg").attr("class","placeholder NormalCss");
        flag=false;
        if($("#jiushui").val()!=1) {
            $.ajax({
                url: "goods_list_xl.htm?searchname=" + $("#searchname").val(),
                type: "post",
                success: function (message) {
                    $(".pro-items").remove();
                    $.each(message, function (i, item) {
                        var mm = parseFloat(item.goodnum / item.sumnum * 100).toFixed(2);
                        $(".proListWrap").append("<div class='pro-items'>\n" +
                            "<a href=\"pro_info.htm?goodsId=" + item.id + "\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                            "                <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\"" + item.img.path + "\" alt=\"\"></div>\n" +
                            "                <div class=\"weui-media-box__bd\">\n" +
                            "                    <h1 class=\"weui-media-box__desc\">" + item.goodsName + "</h1>\n" +
                            "                    <div class=\"wy-pro-pri\">¥<em class=\"num font-15\" >" + parseFloat(item.price).toFixed(2) + "</em></div>\n" +
                            "                    <ul class=\"weui-media-box__info prolist-ul\">\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\">" + item.sumnum + "</em>条评价</li>\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\"></em>" + mm + "<em>%</em>好评</li>\n" +
                            "                    </ul>\n" +
                            "                </div>\n" +
                            "            </a>\n" +
                            "        </div>");
                    });
                    $(".pro-items:gt(5)").hide();
                }
            })
        }else {
            $.ajax({
                url: "goods_list_jsxl.htm",
                type: "post",
                success: function (message) {
                    $(".pro-items").remove();
                    $.each(message, function (i, item) {
                        var mm = parseFloat(item.goodnum / item.sumnum * 100).toFixed(2);
                        $(".proListWrap").append("<div class='pro-items'>\n" +
                            "<a href=\"pro_info.htm?goodsId=" + item.id + "\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                            "                <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\"" + item.img.path + "\" alt=\"\"></div>\n" +
                            "                <div class=\"weui-media-box__bd\">\n" +
                            "                    <h1 class=\"weui-media-box__desc\">" + item.goodsName + "</h1>\n" +
                            "                    <div class=\"wy-pro-pri\">¥<em class=\"num font-15\" >" + parseFloat(item.price).toFixed(2) + "</em></div>\n" +
                            "                    <ul class=\"weui-media-box__info prolist-ul\">\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\">" + item.sumnum + "</em>条评价</li>\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\"></em>" + mm + "<em>%</em>好评</li>\n" +
                            "                    </ul>\n" +
                            "                </div>\n" +
                            "            </a>\n" +
                            "        </div>");
                    });
                    $(".pro-items:gt(5)").hide();
                }
            })
        }
    }

    function jg() {
        flag=!flag;
        if(flag){
            $("#zh").attr("class","placeholder NormalCss");
            $("#xl").attr("class","placeholder NormalCss");
            $("#jg").attr("class","placeholder SortDescCss");
        }else{
            $("#zh").attr("class","placeholder NormalCss");
            $("#xl").attr("class","placeholder NormalCss");
            $("#jg").attr("class","placeholder SortAscCss");
        }
        if($("#jiushui").val()!=1) {
            $.ajax({
                url: "goods_list_jg.htm?searchname=" + $("#searchname").val() + "&flag=" + flag,
                type: "post",
                success: function (message) {
                    $(".pro-items").remove();
                    $.each(message, function (i, item) {
                        var mm = parseFloat(item.goodnum / item.sumnum * 100).toFixed(2);
                        $(".proListWrap").append("<div class='pro-items'>\n" +
                            "<a href=\"pro_info.htm?goodsId=" + item.id + "\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                            "                <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\"" + item.img.path + "\" alt=\"\"></div>\n" +
                            "                <div class=\"weui-media-box__bd\">\n" +
                            "                    <h1 class=\"weui-media-box__desc\">" + item.goodsName + "</h1>\n" +
                            "                    <div class=\"wy-pro-pri\">¥<em class=\"num font-15\" >" + parseFloat(item.price).toFixed(2) + "</em></div>\n" +
                            "                    <ul class=\"weui-media-box__info prolist-ul\">\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\">" + item.sumnum + "</em>条评价</li>\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\"></em>" + mm + "<em>%</em>好评</li>\n" +
                            "                    </ul>\n" +
                            "                </div>\n" +
                            "            </a>\n" +
                            "        </div>");
                    });
                    $(".pro-items:gt(5)").hide();
                }
            })
        }else {
            $.ajax({
                url: "goods_list_jsjg.htm?flag=" + flag,
                type: "post",
                success: function (message) {
                    $(".pro-items").remove();
                    $.each(message, function (i, item) {
                        var mm = parseFloat(item.goodnum / item.sumnum * 100).toFixed(2);
                        $(".proListWrap").append("<div class='pro-items'>\n" +
                            "<a href=\"pro_info.htm?goodsId=" + item.id + "\" class=\"weui-media-box weui-media-box_appmsg\">\n" +
                            "                <div class=\"weui-media-box__hd\"><img class=\"weui-media-box__thumb\" src=\"" + item.img.path + "\" alt=\"\"></div>\n" +
                            "                <div class=\"weui-media-box__bd\">\n" +
                            "                    <h1 class=\"weui-media-box__desc\">" + item.goodsName + "</h1>\n" +
                            "                    <div class=\"wy-pro-pri\">¥<em class=\"num font-15\" >" + parseFloat(item.price).toFixed(2) + "</em></div>\n" +
                            "                    <ul class=\"weui-media-box__info prolist-ul\">\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\">" + item.sumnum + "</em>条评价</li>\n" +
                            "                        <li class=\"weui-media-box__info__meta\"><em class=\"num\"></em>" + mm + "<em>%</em>好评</li>\n" +
                            "                    </ul>\n" +
                            "                </div>\n" +
                            "            </a>\n" +
                            "        </div>");
                    });
                    $(".pro-items:gt(5)").hide();
                }
            })
        }
    }
</script>
</body>
</html>